<!DOCTYPE html>
<html>
    <head>
        <meta name="author" content="Kwh">
        <meta charset="utf-8">
        <script src="../js/jquery-3.1.1.js"></script>
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
             }

            li{
                list-style-type: none;
                margin-top: 40px;
             }

            body{
                margin: 50px;
             }

            .wrap{
                border: 3px solid #f00;
                width: 600px;
                height: 200px;
                position: relative;
                overflow: hidden;
             }

            .wrap ul{
                position:absolute;
                width: 1600px;
                left: 0;
                top: 0;
                height:1px;
             }
            .wrap ul li{
                float: left;
                margin: 10px auto;
                width: 200px;
             }
             .wrap ul:after{
                 display: block;
                 clear: both;
                 content: '';
                 visibility: hidden;
                 height: 0;
             }
             .wrap ul li img{
                 width: 90%;
             }
        </style>
    </head>
    <body>
        <a href="javascript:;" class="goLeft">向左走</a> <a href="javascript:;" class="goRight">向右走</a>
        <div class="wrap">
            <ul>
                <li><img src="../img/t1.jpg" alt=""></li>
                <li><img src="../img/t3.jpg" alt=""></li>
                <li><img src="../img/t4.jpg" alt=""></li>
                <li><img src="../img/t6.jpg" alt=""></li>
                <li><img src="../img/t7.jpg" alt=""></li>
            </ul>
        </div>
    </body>
</html>

<script>   
$(function(){

        var oul = $('.wrap ul');
        var oulHtml = oul.html();
        // 再加一个ul
        oul.html(oulHtml+oulHtml);
        // console.log(oul.html())

        var ali = $('.wrap ul li');
        var aliWidth = ali.eq(0).width();
        var alilength = ali.length;
        var ulWidth = aliWidth*alilength;//总共2000px

        console.log(ali)
        var speed = 2;

        $('.goLeft').click(function(){
            speed=-2;
        });

        $('.goRight').click(function(){
            speed=2;
        });

        function slider(){

        if(speed<0){

            if(oul.css('left')==-ulWidth/2+'px'){
                oul.css('left',0);
                }
            oul.css('left','+=-2px');
        }


        if(speed>0){
            
            if(oul.css('left')=='0px'){
                oul.css('left',-ulWidth/2+'px');
                }

            oul.css('left','+=2px');
            }

        }


        var timeId = setInterval(slider,30);

        $('.wrap').mouseover(function(){
           
            clearInterval(timeId);
        });

        $('.wrap').mouseout(function(){
            timeId = setInterval(slider,30);
        });


});

</script>